<template>
	<view class="container bg-fff">
		
		<view class="search bg-fff">
			<view class="left-box" @click="getlocationcity">
				<u-icon class="map-in-icon" name="map" color="#731e1f" size="24"></u-icon>
				<text>{{maplocationtemp.city?maplocationtemp.city:maplocation.city}}</text>
				<u-icon class="nav-in-icon" name="arrow-right" size="18rpx" color="#731e1f"></u-icon>
			</view>
			<view class="right-box">
				<u-search placeholder="请输入地址或自提点名称" :show-action="true" @search="search" @custom="search"></u-search>
			</view>
		</view>
		
		<view class="map">
			<map id="map" :longitude="longitude" @tap="tapMap" :latitude="latitude" :scale="20" show-location :markers="markers"></map>
		</view>
		
		<view class="list">
			<view class="list-title">选择配送地址</view>
			
			<scroll-view scroll-y="true" :style="{height: scrollHeight}">
				<view>
					<view class="item flex-align-center" v-for="(item,index) in subPois" :key="index" @click="handleSelect(index)">
						<image class="item-image" :src="$setting.imageUrl()+'icon4.png'"></image>
						<view class="item-con">
							<view class="item-name"><text v-if="subPoisIndex == index">[当前选择]</text>{{item.title}}</view>
							<view class="item-address">{{item.address}}</view>
						</view>
					</view>
					<view v-if="subPois.length == 0" style="padding-top: 100rpx;">
						<u-empty text="暂无数据" mode="data"></u-empty>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<fixed-bottom @click="jumpBack()">确定</fixed-bottom>
		
		<!-- <view class="store-fixed flex-center" @click="show = !show">仓库</view> -->
		
		<u-popup v-model="show" mode="bottom" border-radius="14" height="800rpx" closeable>
			<view class="list">
				<view class="list-title">仓库地址</view>
				<view class="item flex-align-center" v-for="(item,index) in storeList" :key="index">
					<image class="item-image" :src="$setting.imageUrl()+'icon4.png'"></image>
					<view class="item-con">
						<view class="item-name"><text v-if="storeIndex == index">[默认最近]</text>{{item.title}}</view>
						<view class="item-address">{{item.address}}</view>
					</view>
				</view>
				<view v-if="storeList.length == 0" style="padding-top: 100rpx;">
					<u-empty text="暂无数据" mode="data"></u-empty>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				scrollHeight: '',
				longitude: '108.49693',
				latitude: '22.78658',
				storeList: [],
				storeIndex: 0,
				includePoints: [],
				markers: [],
				subPois: [],
				subPoisIndex: -1,
				mapCtx: null,
				show: false,
			}
		},
		computed: {
			...mapState(['maplocation', 'maplocationtemp']),
		},
		onLoad() {
			// 初始化地图上下文
			this.mapCtx = uni.createMapContext('map', this);
			this.$store.commit('settempcity',{province:'',city:''});
			const query = uni.createSelectorQuery();
			query.in(this).select('.list').boundingClientRect();
			query.exec((res) => {
				this.scrollHeight = uni.getSystemInfoSync().windowHeight - res[0].top - uni.upx2px(122) - uni.upx2px(200) + 'px';
			})
			
			// #ifdef H5
			  this.getLocationGolde();
			// #endif
			
			// #ifdef MP
			  this.getHttp();
			// #endif
			
			
		},
		methods: {
			
			 // 获取坐标
			getLocationGolde() {
			
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
					   this.longitude = res.longitude;
					   this.latitude = res.latitude;
						this.getOrderCheckScope(res.longitude, res.longitude);
						uni.$u.api.jsonPTencentMapLocation(res.latitude, res.longitude).then(data => {
						
							this.h5search(data.result.formatted_addresses.recommend);  
						})
						
					},
				});
			
			},
			
			
			jumpBack() {
				if(getApp().globalData.warehouseInfo){
					this.$store.commit('stall_adr_set',getApp().globalData.warehouseInfo);
				}
				uni.navigateBack();
			},
			handleSelect(index,isTap) {
				this.subPoisIndex = index;
				
				let longitude = this.subPois[this.subPoisIndex].location.lng;
				let latitude = this.subPois[this.subPoisIndex].location.lat;
				
				getApp().globalData.warehouseInfo = {
					longitude: Number(longitude),
					latitude: Number(latitude),
					address: this.subPois[this.subPoisIndex].address,
					title: this.subPois[this.subPoisIndex].title,
					province: this.subPois[this.subPoisIndex].ad_info.province,
					city: this.subPois[this.subPoisIndex].ad_info.city,
					district: this.subPois[this.subPoisIndex].ad_info.district,
					street: this.adr_replacetitle(this.subPois[this.subPoisIndex].address,this.subPois[this.subPoisIndex].title,this.subPois[this.subPoisIndex].ad_info.province,this.subPois[this.subPoisIndex].ad_info.city,this.subPois[this.subPoisIndex].ad_info.district),
				};
				
				this.getOrderCheckScope(longitude, latitude);
				if(isTap){
					// setTimeout(() => {
					// 	this.includePoints.push({
					// 		longitude: Number(longitude),
					// 		latitude: Number(latitude),
					// 	});
					// 	this.markers.push({
					// 		id: 0,
					// 		// iconPath: '../../../static/icon/logo.png',
					// 		// width: 50,
					// 		// height: 50,
					// 		longitude: Number(longitude),
					// 		latitude: Number(latitude),
					// 		label: {
					// 			content: "当前选择",
					// 			bgColor: '#ffffff',
					// 			borderRadius: 5,
					// 			padding: 5,
					// 			anchorX: 0,
					// 			anchorY: -50,
					// 		},
					// 	});
					// }, 50)
				}else{
					this.includePoints = [];
					this.markers = [];
					this.longitude = Number(longitude)
					this.latitude = Number(latitude)
					setTimeout(() => {
						this.includePoints.push({
							longitude: Number(longitude),
							latitude: Number(latitude),
						});
						this.markers.push({
							id: 0,
							// iconPath: '../../../static/icon/logo.png',
							// width: 50,
							// height: 50,
							longitude: Number(longitude),
							latitude: Number(latitude),
							label: {
								content: "当前选择",
								bgColor: '#ffffff',
								borderRadius: 5,
								padding: 5,
								anchorX: 0,
								anchorY: -50,
							},
						});
					}, 50)
				}
				
			},
			search(e, isTap = false) {
				if(uni.$u.test.isEmpty(e)) {
					uni.showToast({
						title: "搜索关键字不能为空哦",
						icon: "none"
					})
					return ;
				}
				this.subPois = [];
				// let boundary = "nearby("+this.latitude+","+this.longitude+",10,1)";
				// uni.$u.api.tencentMapPlaceSearch(boundary,e,'','').then(res => {
				let region = this.maplocationtemp.city?this.maplocationtemp.city:this.maplocation.city;
				uni.$u.api.tencentMapRegionSearch(region,e,'','').then(res => {
					if(res.data.status == 0) {
						console.log(res);
						// if(res.data.sub_pois.length > 0) {
							// this.subPois = this.subPois.concat(res.data.sub_pois);
							this.subPois = this.subPois.concat(res.data.data);
							// console.log(this.subPois);
						// }
						// if(res.data.sub_pois.length > 0) {
							console.log('autohandlselect')
							this.handleSelect(0, isTap)
						// }
					} else if(res.data.status == 310) {
						uni.showToast({
							title: "位置信息错误,请检查是否开启定位",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			
			h5search(e, isTap = false) {
				if(uni.$u.test.isEmpty(e)) {
					uni.showToast({
						title: "搜索关键字不能为空哦",
						icon: "none"
					})
					return ;
				}
				this.subPois = [];
				// let boundary = "nearby("+this.latitude+","+this.longitude+",10,1)";
				// uni.$u.api.tencentMapPlaceSearch(boundary,e,'','').then(res => {
				let region = this.maplocationtemp.city?this.maplocationtemp.city:this.maplocation.city;
				uni.$u.api.jsonPtencentMapRegionSearch(region,e,'','').then(res => {
					if(res.data.status == 0) {
						
						// if(res.data.sub_pois.length > 0) {
							// this.subPois = this.subPois.concat(res.data.sub_pois);
							this.subPois = this.subPois.concat(res.data.data);
							// console.log(this.subPois);
						// }
						// if(res.data.sub_pois.length > 0) {
							console.log('autohandlselect')
							this.handleSelect(0, isTap)
						// }
					} else if(res.data.status == 310) {
						uni.showToast({
							title: "位置信息错误,请检查是否开启定位",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			getOrderCheckScope(longitude, latitude) {
				uni.$u.api.getOrderCheckScope({
					longitude: longitude, 
					latitude: latitude,
				}).then(res => {
					this.storeList = res.storeList;
					if(this.storeList.length == 0) {
						uni.showToast({
							title: "当前位置暂未配送门店",
							icon: "none"
						})
						return ;
					}
					
					// this.includePoints.push({
					// 	longitude: Number(this.longitude),
					// 	latitude: Number(this.latitude)
					// });
					// this.storeList.forEach((item,index) => {
						// this.includePoints.push({
						// 	longitude: Number(item.longitude),
						// 	latitude: Number(item.latitude)
						// });
						// this.markers.push({
						// 	id: 2,
						// 	iconPath: item.image_url.file_path,
						// 	width: 50,
						// 	height: 50,
						// 	longitude:  Number(item.longitude),
						// 	latitude: Number(item.latitude)
						// });
					// })
				})
			},
			tapMap(e){
				this.includePoints = [];
				this.markers = [];
				console.log('9999999999999999',e.detail.latitude,)
				this.longitude = e.detail.longitude
				this.latitude = e.detail.latitude
				setTimeout(() => {
					// this.includePoints.push({
					// 	longitude: this.longitude,
					// 	latitude: this.latitude,
					// });
					this.markers.push({
						id: 0,
						// iconPath: '../../../static/icon/logo.png',
						// width: 50,
						// height: 50,
						longitude: Number(this.longitude),
						latitude: Number(this.latitude),
						label: {
							content: "当前选择",
							bgColor: '#ffffff',
							borderRadius: 5,
							padding: 5,
							anchorX: 0,
							anchorY: -50,
						},
					});
				}, 50)
				this.getOrderCheckScope(e.detail.longitude,e.detail.latitude)
				let excludeCategoryByName = "category<>地名地址:行政地名,地名地址:热点区域:商圈类";
				// let encodedExcludeCategoryByName = encodeURIComponent(excludeCategoryByName);
					
				// #ifdef H5
					uni.$u.api.jsonPtencentMapLocationEXP(e.detail.latitude, e.detail.longitude,excludeCategoryByName,'1000',"").then(data => {
						console.log("H5address result",data);
						this.subPois = data.data.data;
						this.handleSelect(0, true)
					})
				// #endif
				// #ifdef MP
					uni.$u.api.tencentMapLocationEXP(e.detail.latitude, e.detail.longitude,excludeCategoryByName,'1000',"").then(data => {
						console.log("address result",data);
						this.subPois = data.data.data;
						this.handleSelect(0, true)
					})
				// #endif
				
				// uni.$u.api.tencentMapLocation(this.latitude, this.longitude).then(data => {
				// 	console.log("address result",data);
				// 	this.search(data.data.result.formatted_addresses.recommend,true);
				// })
			},
			getHttp() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.getOrderCheckScope(res.longitude, res.latitude);
						uni.$u.api.tencentMapLocation(this.latitude, this.longitude).then(data => {
							console.log("address result",data);
							this.search(data.data.result.formatted_addresses.recommend);
						})
						
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
					},
				});
			},
			getlocationcity() {
				uni.navigateTo({
					url: '/pages/index/selectcityandprovince'
				})
			},
			adr_replacetitle(address,tit,pr,ct,st){
				let outadr = address;
				outadr = outadr.replace(pr,'')
				outadr = outadr.replace(ct,'')
				outadr = outadr.replace(st,'')
				outadr = outadr+tit
				return outadr;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		
		.search {
			padding: 16rpx 30rpx;
			margin-bottom: 20rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		.map {
			
			map {
				width: 100%;
				height: 600rpx;
			}
		}
		
		.list {
			
			.list-title {
				font-size: 32rpx;
				color: #01000D;
				padding: 40rpx 0;
				text-align: center;
			}
			
			.item {
				 padding: 0 56rpx;
				 margin-bottom: 56rpx;
				 
				 .item-image {
					 width: 80rpx;
					 height: 80rpx;
				 }
				 
				 .item-con {
					 flex: 1;
					 margin-left: 32rpx;
					 
					 .item-name {
						 
						 text {
							 color: #BB0024
						 }
						 font-size: 30rpx;
						 color: #333333;
					 }
					 
					 .item-address {
						 margin-top: 12rpx;
						 font-size: 28rpx;
						 color: #666262;
					 }
				 }
			}
		}
		
		.store-fixed {
			position: fixed;
			bottom: 200rpx;
			right: 30rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			z-index: 999;
			background: #fff;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.09);
			font-size: 28rpx;
			color: #FF6900;
		}
	}
	.map-in-icon {
		margin-right: 10rpx;
	}
	.nav-in-icon {
		margin-left: 10rpx;
		transform: rotate(90deg);
	}
	.left-box {
		margin-right:20rpx;
	}
	.right-box {
		flex: 1
	}
</style>
